// 获取 id 和 token , 验证
const id = window.localStorage.getItem("id");
const token = window.localStorage.getItem("token");
if (!id || !token) {
    window.localStorage.setItem("url", "./detail");
    window.location.href = `./login.html`;
}
// 判断登录状态是否到期
getLogin();
function getLogin() {
    ajax({
        url: "http://localhost:8888/users/info",
        data: `id=${id}`,
        token: token,
        dataType: "json",
        success(res) {
            if (res.code === 1) {
                console.log(res);
                $(".loginBox>li:first").text(`欢迎您,${res.info.nickname}`);
                $(".shadowNick").text(`${res.info.nickname}`);
            } else {
                window.localStorage.setItem("url", "./detail");
                window.location.href = `./login.html`;
            }
        },
    });
}


const bigBox = document.querySelector(".box");
const detBox = document.querySelector(".details");
Details();
function Details() {
    const id = window.localStorage.getItem("goods_id");
    ajax({
        url: "http://localhost:8888/goods/item",
        method: "get",
        data: `id=${id}`,
        dataType: "json",
        success: function (res) {
            console.log(res);
            Rendering(res);
        },
        error: function (err, message) {
            console.log("本次请求失败了");
            // console.log(message);
            throw new Error(err);
        }
    });
}


//这里拿数据渲染页面
function Rendering(result) {
    let str = `
    <div class="lef">
        <!-- 展示图片的盒子 -->
        <div class="show">
            <img src="${result.info.img_big_logo}" alt="">
            <!-- 遮罩层盒子 -->
            <div class="mask"></div>
        </div>
        <!-- 列表盒子 -->
        <div class="list">
            <p class="active">
                <img src="${result.info.img_big_logo}" data-show="${result.info.img_big_logo}" data-enlarge="${result.info.img_big_logo}" alt="">
            </p>
            <p>
                <img src="${result.info.img_big_logo}" data-show="${result.info.img_big_logo}" data-enlarge="${result.info.img_big_logo}" alt="">
            </p>
            <p class="active">
                <img src="${result.info.img_big_logo}" data-show="${result.info.img_big_logo}" data-enlarge="${result.info.img_big_logo}" alt="">
            </p>
            <p class="active">
                <img src="${result.info.img_big_logo}" data-show="${result.info.img_big_logo}" data-enlarge="${result.info.img_big_logo}" alt="">
            </p>
        </div>
        <!-- 放大的盒子 -->
        <div class="enlarge" style="background-image: url(${result.info.img_big_logo});"></div>
    </div>

    <div class="cen">
        <p class="title">${result.info.title}</p>
        <div class="is_hot: true"><img src="../images/detail/背景图片.png" alt=""></div>
        <div class="priceBox">
            <img class="tm618" src="../images/detail/tianmao618bg.png" alt="">
            <del>
                <p class="price">原价￥${result.info.price}</p>
            </del>
            <p class="current_price">现价￥${result.info.current_price}</p>
            <p class="is_sale">本店折扣${result.info.sale_type}</p>
        </div>
        <p class="goods_number">剩余库存${result.info.current_price}</p>
        <button class="sshop">立即购买</button>
        <button class="scar">加入购物车</button>
    </div>`

    bigBox.innerHTML = str;



    const e = new Enlarge("#box");
    console.log(e);

    const id = window.localStorage.getItem("id");
    const goods_id = window.localStorage.getItem("goods_id");
    const token = window.localStorage.getItem("token");
    // 这里实现的是点击加入购物车功能
    const scar = document.querySelector(".scar");

    scar.addEventListener("click", () => {
        ajax({
            url: "http://localhost:8888/cart/add",
            dataType: "JSON",
            data: `id=${id}&goodsId=${goods_id}`,
            token: token,
            method: "post",
            success: function (res) {
                // alert(成功添加商品)
                console.log(res);
                if (res.code === 1) {
                    alert("加入购物车成功,你太有钱了");
                    return;
                }
                alert("添加失败,请检查当前网络环境");
            },
            error: function (err, message) {
                console.log("本次请求失败了");
                console.log(message);
                throw new Error(err);
            },
        });
    });
}



// 这是点击退出登录
outLogin();
function outLogin() {
    $(".outLogin").click(() => {
        window.localStorage.removeItem("id");
        window.localStorage.removeItem("token");
        window.location.reload();
    });
}

// 样式
getCss();
function getCss() {
    $(".ind").mouseenter(function () {
        $(".ind").css("background-color", "white");
        $(".loginShadow").css("display", "block");
    });

    $(".loginShadow").mouseleave(function () {
        $(".ind").css("background-color", "rgba(0,0,0,0)");
        $(".loginShadow").css("display", "none");
    });
}


class Enlarge {
    constructor(select) {
        console.log(123);
        // 获取到范围元素
        this.ele = document.querySelector(select);
        // .show 的 div 盒子, 结构: div > img
        this.show = this.ele.querySelector(".show");
        // .mask 的 div 盒子(遮罩层), 结构: .show > .mask
        this.mask = this.ele.querySelector(".mask");
        // .list 的 div 盒子(列表), 结构: .list > p*2 > img
        this.list = this.ele.querySelector(".list");
        // .enlarge 的 div 盒子, 背景图片
        this.enlarge = this.ele.querySelector(".enlarge");
        // 获取到一些列的 宽高值
        // 在这里我想要调整 mask 的宽高
        /* 
            mask         enlarge
        ----------- = -------------
            show         b_g
        */
        // show 盒子的尺寸 如何获取
        // 元素.offsetWidth 和 offsetHeight, 获取到的是元素 内容 + padding + border 的尺寸
        this.show_width = this.show.offsetWidth
        this.show_height = this.show.offsetHeight
        console.log(this.show_width, this.show_height);
        // enlarge 和 b_g 需要通过获取非行内样式的语法
        // enlarge 盒子的尺寸 如何获取
        // 注意: enlarge 盒子默认是隐藏的
        // 获取元素非行内样式
        // 语法: window.getComputedStyle(要获取样式的元素).样式名
        this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width)
        this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height)
        // 背景图的尺寸 如何获取
        // 非行内样式
        this.bg_width = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[0])
        this.bg_height = parseInt(window.getComputedStyle(this.enlarge).backgroundSize.split(' ')[1])
        // 书写一个 启动器
        this.init()
    }
    // 书写方法
    // 0. 启动器
    init() {
        // 去调用所有的方法
        this.change()
        this.overOut()
        this.changeOne()
        this.move()
    }
    // 调整 mask 盒子比例
    change() {
        // 1. 计算出 mask 的 尺寸
        this.mask.style.width = this.show_width * this.enlarge_width / this.bg_width + 'px'
        this.mask.style.height = this.show_height * this.enlarge_height / this.bg_height + 'px'
    }
    // 移入移出
    overOut() {
        // 给 show 绑定事件
        this.show.addEventListener('mouseenter', () => {
            this.mask.style.display = 'block'
            this.enlarge.style.display = 'block'
        })

        this.show.addEventListener('mouseleave', () => {
            this.mask.style.display = 'none'
            this.enlarge.style.display = 'none'
        })
    }

    // 点击切换商品
    changeOne() {
        // 点击的是 img 图片的 时候
        // 这里以后会大量渲染商品图片 , 所以利用事件委托处理(委托给 list)
        this.list.addEventListener('click', e => {
            // 处理事件兼容
            e = e || window.event
            const target = e.target || e.srcElement
            // 判断点击的是 图片 时
            if (target.tagName === 'IMG') {
                // 这里需要获取到你点击的图片信息 , 需要记录 自定义属性获取
                const show = target.dataset.show
                const big = target.dataset.big
                // 赋值给 show 和 enlarge 的 b_g
                this.show.firstElementChild.src = show
                this.enlarge.style.backgroundImage = `url(${big})`
            }
            // 这里需要 循环 和 遍历
            for (let i = 0; i < this.list.children.length; i++) {
                console.log(this.list.children[i]);
                this.list.children[i].className = ''
            }
            target.parentElement.className = 'active'
        })
    }
    // 等比例跟随移动
    /*  公式 : 求取 enlarge 移动的 距离
        左移动距离              右 移动距离
    -------------------  =  ------------------
        show 盒子               背景大尺寸
    */
    move() {
        // 鼠标跟随 : 给 show 盒子绑定一个 鼠标移动事件
        this.show.addEventListener('mousemove', e => {
            // 处理事件兼容
            e = e || window.event
            // 获取到 光标 位置 ( 提前调整好光标在盒子中心位置 )
            let x = e.offsetX - this.mask.offsetWidth / 2
            let y = e.offsetY - this.mask.offsetHeight / 2
            // 在此进行 边界值 判断
            if (x <= 0) x = 0
            if (y <= 0) y = 0
            if (x >= this.show_width - this.mask.offsetWidth) x = this.show_width - this.mask.offsetWidth
            if (y >= this.show_height - this.mask.offsetHeight) y = this.show_height - this.mask.offsetHeight
            // 将 x y 值 赋值给 mask 的 left 和 top
            this.mask.style.left = x + 'px'
            this.mask.style.top = y + 'px'
            // 需要拿到 mask 盒子的移动距离 ( offsetLeft )
            // const bg_x = this.mask.offsetLeft * this.bg_width / this.show_width
            // const bg_y = this.mask.offsetTop * this.bg_height / this.show_height
            const bg_x = (this.bg_width / this.show_width) * x;
            const bg_y = (this.bg_height / this.show_height) * y;
            // 将 值 赋值 给 背景图
            this.enlarge.style.backgroundPosition = `-${bg_x}px -${bg_y}px`
        })
    }
}


/* ! 大功告成咯 ! ^_^ */




// // 这里是放大镜
// function Enlarge(select) {
//     // 范围元素
//     this.ele = document.querySelector(select);

//     // .show 的 div 盒子, 结构: div > img
//     this.show = this.ele.querySelector(".show");

//     // .mask 的 div 盒子(遮罩层), 结构: .show > .mask
//     this.mask = this.ele.querySelector(".mask");

//     // .list 的 div 盒子(列表), 结构: .list > p*2 > img
//     this.list = this.ele.querySelector(".list");

//     // .enlarge 的 div 盒子, 背景图片
//     this.enlarge = this.ele.querySelector(".enlarge");

//     // show 盒子的尺寸 如何获取
//     // 元素.offsetWidth 和 offsetHeight, 获取到的是元素 内容 + padding + border 的尺寸
//     this.show_width = 350;
//     this.show_height = 350;

//     // enlarge 盒子的尺寸 如何获取
//     // 注意: enlarge 盒子默认是隐藏的
//     // 获取元素非行内样式
//     // 语法: widnow.getComputedStyle(要获取样式的元素).样式名
//     this.enlarge_width = parseInt(window.getComputedStyle(this.enlarge).width);
//     this.enlarge_height = parseInt(window.getComputedStyle(this.enlarge).height);

//     // 背景图的尺寸 如何获取
//     // 非行内样式
//     this.bg_width = parseInt(
//         window.getComputedStyle(this.enlarge).backgroundSize.split(" ")[0]
//     );
//     this.bg_height = parseInt(
//         window.getComputedStyle(this.enlarge).backgroundSize.split(" ")[1]
//     );

//     // 调用启动器
//     this.init();
// }

// // 书写方法
// // 0. 启动器
// Enlarge.prototype.init = function () {
//     // 去调用所有的方法
//     this.setScale();
//     this.overOut();
//     this.event();
//     this.move();
// };

// Enlarge.prototype.setScale = function () {
//     // 1. 计算出 mask 的 尺寸
//     this.mask_width = (this.enlarge_width * this.show_width) / this.bg_width;
//     this.mask_height = (this.enlarge_height * this.show_height) / this.bg_height;

//     // 2. 给 this.mask 盒子赋值
//     this.mask.style.width = this.mask_width + "px";
//     this.mask.style.height = this.mask_height + "px";
// };

// Enlarge.prototype.overOut = function () {
//     // 绑定移入事件
//     this.show.addEventListener("mouseenter", () => {
//         this.mask.style.display = "block";
//         this.enlarge.style.display = "block";
//     });

//     // 绑定移出事件
//     this.show.addEventListener("mouseleave", () => {
//         this.mask.style.display = "none";
//         this.enlarge.style.display = "none";
//     });
// };

// Enlarge.prototype.event = function () {
//     this.list.addEventListener("click", (e) => {
//         // 处理事件对象兼容
//         e = e || window.event;
//         // 处理事件目标兼容
//         const target = e.target || e.srcElement;

//         // 条件判断事件目标
//         if (target.tagName === "IMG") {
//             // 2. 拿到自定义属性
//             const showUrl = target.dataset.show;
//             const enlargeUrl = target.dataset.enlarge;

//             // 3. 开始赋值
//             this.show.firstElementChild.src = showUrl;
//             this.enlarge.style.backgroundImage = `url(${enlargeUrl})`;

//             // 4. 切换 active 类名
//             // 4-1. 给 this.list 内所有的子元素去掉类名
//             for (let i = 0; i < this.list.children.length; i++) {
//                 this.list.children[i].classList.remove("active");
//             }
//             // 4-2. 给 p 标签加上 active 类名
//             target.parentNode.classList.add("active");
//         }
//     });
// };

// Enlarge.prototype.move = function () {
//     // 1. 给 this.show 绑定鼠标移动事件
//     this.show.addEventListener("mousemove", (e) => {
//         // 处理事件对象兼容
//         e = e || window.event;

//         let x = e.offsetX - this.mask_width / 2;
//         let y = e.offsetY - this.mask_height / 2;

//         // 3. 边界值判断
//         if (x <= 0) x = 0;
//         if (y <= 0) y = 0;
//         if (x >= this.show_width - this.mask_width)
//             x = this.show_width - this.mask_width;
//         if (y >= this.show_height - this.mask_height)
//             y = this.show_height - this.mask_height;

//         // 4. 给 mask 的 left 和 top 进行赋值
//         this.mask.style.left = x + "px";
//         this.mask.style.top = y + "px";

//         // 5. 让背景图联动
//         // 计算出数字
//         // 比例: 背景图的尺寸 / 图片盒子的尺寸(show盒子的尺寸) * mask 盒子移动的距离
//         const bg_x = (this.bg_width / this.show_width) * x;
//         const bg_y = (this.bg_height / this.show_height) * y;

//         // 给 enlarge 盒子的 backgroundPosition 设置值
//         this.enlarge.style.backgroundPosition = `-${bg_x}px -${bg_y}px`;
//     });
// };